<template>
  <el-dialog
    title="商品库存流水"
    :visible.sync="record.open"
    width="1080px"
    :before-close="cancel"
    append-to-body
  >
    <el-row class="excelOut">
      <el-col :span='1.5' :offset="21">
        <el-button
          :style="{ marginBottom: '10px' }"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['tms:goods:export']"
          >excel导出
        </el-button>
      </el-col>
    </el-row>
    <el-table
      :header-cell-style="{ background: '#ADA9A9', color: '#000' }"
      :row-class-name="tableRowClassName"
      :data="goodsIn"
      :border="true"
    >
      <el-table-column label="编号" prop="id" width="50" align="center" />
      <el-table-column label="操作" align="center" width="60" prop="type" />
      <el-table-column
        label="系列号"
        align="center"
        width="120"
        prop="parentGoodsNo"
      />
      <el-table-column label="零件号码" align="center" prop="goodsNo" />
      <el-table-column label="零件名称" align="center" prop="goodsName" />
      <el-table-column label="单位" align="center" width="55" prop="unit" />
      <el-table-column
        label="库存数量"
        align="center"
        width="80"
        prop="stock"
      />
      <el-table-column
        label="系统备注"
        align="center"
        width="115"
        prop="remark"
      >
        <template slot-scope="scope">
          <div :style="{ color: scope.row.remark ? 'red' : 'red' }">
            {{ scope.row.remark }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center" prop="createTime" />
      <el-table-column
        label="操作人"
        width="80"
        align="center"
        prop="createBy"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-sizes="[10, 20, 30, 50, 500]"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getGoodsDetail"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listGoods } from "@/api/tms/inventory";
export default {
  name: "InventoryGoods",
  props: {
    record: Object,
  },
  data() {
    return {
      // 总条数
      total: 0,
      goodsIn: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parentGoodsNo: null,
        categoryId: null,
        supplier: null,
        goodsName: null,
        goodsNo: null,
        unit: null,
        model: null,
        grossWeight: null,
        netWeight: null,
        createTime:null,
      },
    };
  },
  watch: {
    "record.open": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getGoodsDetail();
        }
      },
    },
  },
  methods: {
    getGoodsDetail() {
      this.queryParams.goodsNo = this.record.form.goodsNo;
      listGoods(this.queryParams).then((res) => {
        res.rows.map((item) => {
          if (item.type == "out") {
            item.type = "出库";
            item.stock = "-" + item.stock;
          } else if (item.type == "in") {
            item.type = "入库";
            item.stock = "+" + item.stock;
          } else if (item.type == "inDel") {
            item.type = "删除";
            item.stock = "-" + item.stock;
          } else if (item.type == "outDel") {
            item.type = "删除";
            item.stock = "+" + item.stock;
          } else if (item.type == "changeAdd") {
            item.type = "调大";
            item.stock = "+" + item.stock;
          } else if (item.type == "changeSub") {
            item.type = "调小";
            item.stock = "-" + item.stock;
          }
        });
        this.goodsIn = res.rows;
        this.total = res.total;
      });
    },
    cancel() {
      this.$emit("refresh");
    },
    // 表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/tms/goodsStockHistory/water_export",
        {
          ...this.queryParams,
        },
        `商品库存流水.xlsx`
      );
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: #f7faff;
  text-align: left;
}
.el-table .success-row {
  background: #ebf1fb;
}
</style>
